<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Mashup API 搜索</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
            crossorigin="anonymous"></script>
</head>

<body>
<div class="container p-5">
    <div class="row">
        <div class="col">
            <h1>搜索 API</h1>
            请输入多个类别关键词，以逗号分隔
            <div class="input-group mb-3">
                <label for="key"></label>
                <input type="text" class="form-control" id="key">
                <button class="btn btn-primary" onclick="search()">搜索</button>
                <button class="btn btn-secondary" onclick="test()">测试命中率</button>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col" id="content">
        </div>
    </div>
</div>
</body>

</html>

<script>

    let content = document.getElementById("content");

    async function search() {
        content.innerHTML = `正在查询，请稍候...`;
        let inputBox = document.getElementById("key");
        let key = inputBox.value;
        let resp = await fetch(`http://127.0.0.1:8080/search?params=${key}`);
        let res = await resp.json();
        console.log(res);
        content.innerHTML = `
            <h4>查询耗时：${res.time}ms</h4>
            <h4>加权图最终权重：${res.doubleWeight}，查询结果：</h4>
        `;
        let table = document.createElement("table");
        table.classList.add("table", "table-bordered", "table-striped");
        for (i = 0; i < res.weightedAns.length; i++) {
            let tbody = document.createElement("tbody");
            api = res.weightedAns[i];
            tbody.innerHTML += `
                <tr>
                    <th>API 名称</th>
                    <td>${api.name}</td>
                    <th>API 地址</th>
                    <td>${api.addr}</td>
                </tr>
            `;
            table.appendChild(tbody);
        }
        content.appendChild(table);
        content.innerHTML += `</tbody></table>
            <h4>无权图最终权重（API 个数）：${res.intWeight}，查询结果：</h4>
            <table class="table table-bordered table-striped">
            <tbody>
        `;
        let table2 = document.createElement("table");
        table2.classList.add("table", "table-bordered", "table-striped");
        for (i = 0; i < res.ans.length; i++) {
            let tbody = document.createElement("tbody");
            api = res.ans[i];
            tbody.innerHTML += `
                <tr>
                    <th>API 名称</th>
                    <td>${api.name}</td>
                    <th>API 地址</th>
                    <td>${api.addr}</td>
                </tr>
            `;
            table2.appendChild(tbody);
        }
        content.appendChild(table2);
        content.innerHTML += `</tbody></table>`;
    }

    async function test() {
        content.innerHTML = `正在测试，请稍候...`;
        let resp = await fetch(`http://127.0.0.1:8080/test`);
        let res = await resp.json();
        content.innerHTML = `
            <h4>测试耗时：${res.time}ms</h4>
            <h4>Mashup 类别关键词搜索命中率</h4>
            <table class="table table-striped table-bordered">
            <tbody>
                <tr>
                    <th>加权图</th>
                    <td>${res.weightedRate}%</td>
                </tr>
                <tr>
                    <th>无权图</th>
                    <td>${res.rate}%</td>
                </tr>
            </tbody>
            </table>
        `;
    }
</script>